<template>
  <div class="lilei-slow-tell">
    <!-- 李蕾慢读 -->
    <lilei-slow-tell-div />
    <!-- 超级会员 -->
    <super-members />
    <!-- 好书慢读/邀你参加 -->
    <div class="tab-button">
      <button
        @click="currentTabComponent = 'GoodBookSlowly'"
        :class="[currentTabComponent === 'GoodBookSlowly' ? 'tab' : 'not-tab']"
      >
        好书“慢读”
      </button>
      <button
        @click="currentTabComponent = 'InviteYouToAttend'"
        :class="[
          currentTabComponent === 'InviteYouToAttend' ? 'tab' : 'not-tab',
        ]"
      >
        邀你参加
      </button>
    </div>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
import { ref } from "vue";
import LileiSlowTellDiv from "@/components/SlowTell/LileiSlowTellDiv.vue";
import SuperMembers from "@/components/SlowTell/SuperMembers.vue";
import GoodBookSlowly from "../../../components/SlowTell/GoodBookSlowly.vue";
import InviteYouToAttend from "../../../components/SlowTell/InviteYouToAttend.vue";
export default {
  components: {
    LileiSlowTellDiv,
    SuperMembers,
    GoodBookSlowly,
    InviteYouToAttend,
  },
  setup() {
    const currentTabComponent = ref("GoodBookSlowly");
    return {
      currentTabComponent,
    };
  },
};
</script>

<style lang="less">
.lilei-slow-tell {
  .tab-button {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    button {
      background-color: transparent;
      width: 180px;
      height: 0;
      border-style: none solid solid;
      font-weight: bold;
      &:first-of-type {
        transform: translateX(15px);
        border-radius: 10px 35px 0 0;
        &.tab {
          z-index: 1;
          border-width: 0px 15px 36px 0px;
          line-height: 36px;
          font-size: 15px;
          border-color: transparent transparent #ddf2ff;
        }
        &.not-tab {
          border-width: 0px 15px 28px 0px;
          font-size: 12px;
          border-color: transparent transparent #d1e6ff;
          line-height: 30px;
          font-weight: normal;
        }
      }
      &:last-of-type {
        transform: translateX(-15px);
        border-radius: 35px 10px 0 0;
        &.tab {
          z-index: 1;
          line-height: 36px;
          border-width: 0px 0px 36px 15px;
          font-size: 15px;
          border-color: transparent transparent #ddf2ff;
        }
        &.not-tab {
          border-width: 0px 0px 28px 15px;
          font-size: 12px;
          border-color: transparent transparent #d1e6ff;
          line-height: 30px;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
